<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card shadow="hover" class="mgb20" style="height: 230px; text-align: center">
					<div class="user-info">
						<el-avatar :size="120" :src="imgurl" />
						<div class="user-info-cont">
							<div class="user-info-name">{{currentUserName}}</div>
							<div>账号类型：{{ role }}</div>
						</div>
					</div>
					<span style="text-align: center">注册时间: {{currentUserCreateTime}}</span>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="12">
						<el-card shadow="hover" :body-style="{ padding: '4px' }">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon"><User /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{boardData.userTotal}}</div>
									<div v-if="currentUserRole == 3">用户总数</div>
									<div v-if="currentUserRole == 2">快递员总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card shadow="hover" :body-style="{ padding: '4px' }">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon"><UserFilled /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{boardData.userNewCount}}</div>
									<div v-if="currentUserRole == 3">今日新增用户数</div>
									<div v-if="currentUserRole == 2">今日新增快递员数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12" style="margin-top: 10px">
						<el-card shadow="hover" :body-style="{ padding: '4px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon"><Present /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{boardData.orderTotal}}</div>
									<div>快件总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12" style="margin-top: 10px">
						<el-card shadow="hover" :body-style="{ padding: '4px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon"><Box /></el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{boardData.orderNewCount}}</div>
									<div>今日快件新增数</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<schart ref="bar" class="schart" canvasId="bar" :options="options" :key="updateKey"></schart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<schart ref="line" class="schart" canvasId="line" :options="options2" :key="updateKey"></schart>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="Index">
	import Schart from 'vue-schart';
	import { reactive, onMounted, ref } from 'vue';
	import imgurl from '../assets/img/avatar.jpg';
	import {getDashboardApi} from '../api/index';


	const roleArray = ['普通用户', '快递员', '网点管理员', '系统管理员'];
	const currentUserName = localStorage.getItem('name');
	const currentUserRole = localStorage.getItem('role');
	const currentUserCreateTime = localStorage.getItem('createTime');
	const role = roleArray[parseInt(currentUserRole)];
	const updateKey = ref(0);
	const boardData = reactive({
		userTotal: 0,
		userNewCount: 0,
		orderTotal: 0,
		orderNewCount: 0
	});
	const options = {
		type: 'bar',
		title: {
			text: '最近一周快件数据'
		},
		xRorate: 25,
		labels: ['2022-11-08', '2022-11-09', '2022-11-10', '2022-11-11', '2022-11-12', '2022-11-13', '2022-11-14'],
		datasets: [
			{
				label: '数量(件)',
				data: [1, 2, 3, 4, 5, 6, 7]
			},
			{
				label: '重量(KG)',
				data: [2.2, 2.7, 3.2, 6.4, 2.5, 4.6, 5.7]
			},
			{
				label: '金额(￥)',
				data: [18.2, 10.7, 20.2, 26.4, 32.5, 34.6, 35.7]
			}
		]
	};
	const options2 = {
		type: 'line',
		title: {
			text: '今年各月份快件数趋势图'
		},
		labels: ['1月', '2月', '3月', '5月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
		datasets: [
			{
				label: '快件数(件)',
				data: [234, 278, 270, 190, 230, 100, 200, 330, 224, 220, 123]
			}
		]
	};
	const todoList = reactive([
		{
			title: '今天要修复100个bug',
			status: false
		},
		{
			title: '今天要修复100个bug',
			status: false
		},
		{
			title: '今天要写100行代码加几个bug吧',
			status: false
		},
		{
			title: '今天要修复100个bug',
			status: false
		},
		{
			title: '今天要修复100个bug',
			status: true
		},
		{
			title: '今天要写100行代码加几个bug吧',
			status: true
		}
	]);

	const getData = async () => {
		const res = await getDashboardApi({});
		if (res) {
			console.log("dashboard", res);
			const d = res.data;
			options.labels = d.barLabels;
			options.datasets[0].data = d.barCountData;
			options.datasets[1].data = d.barWeightData;
			options.datasets[2].data = d.barAmountData;
			options2.labels = d.lineLabels;
			options2.datasets[0].data = d.lineCountData;
			Object.keys(boardData).map((key: any) => boardData[key] = d[key]);
			updateKey.value += 1;
		}
	};
	getData();

</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 100px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(100, 213, 114);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 10px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	::v-deep(.el-row) {
		margin-bottom: 5px;
	}
</style>
